<script setup lang="ts">
import { router } from '@/router';
import { PopoverAction } from 'vant';
import { ref } from 'vue';

const props = defineProps({
    name: String
});
const showPopover = ref(false);

const actions = [
    { text: '创建班级', icon: 'add-o' },
    { text: '加入班级', icon: 'search' },
];
const onSelect = (_action: PopoverAction, index: number) => {
    if (index === 0) {
        router.push({
            name: 'ClassCreate'
        });
    } else if (index === 1) {
        router.push({
            name: 'ClassJoin'
        })
    }
}
</script>

<template>
    <div class="container">
        <div class="center">
            <p style="margin: 0%; font-size: 15px;">{{ props.name }}</p>
        </div>
        <div class="icon-right">
            <van-popover v-model:show="showPopover" :actions="actions" @select="onSelect" placement="bottom-end">
                <template #reference>
                    <van-icon name="add-o" size="32"/>
                </template>
            </van-popover>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    display: flex;
    background-color: white;
    flex-basis: 50px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-bottom: 1px rgba(0, 0, 0, 0.13) solid;
    width: 100%;
    .center {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .icon-right {
        position: absolute;
        right: 3%;
        display: flex;
        align-items: center;
    }
}
</style>